<template>
    <div>
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row>
                <el-col>
                     <el-button type="primary" @click="showAddDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <tree-table class="treeTable" :data="cateList" :columns="columns" :selection-type="false"
            :expand-type="false" show-index index-text="#" border
            :show-row-hover="false">
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted===false"
                    style="color:lightgreen"></i>
                     <i class="el-icon-error" v-else  style="color:red"></i>
                </template>
                <template slot-scope="scope" slot="order">
                    <el-tag size="mini" v-if="scope.row.cat_level===0">
                        一级
                    </el-tag>
                    <el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">
                        二级
                    </el-tag>
                    <el-tag type="warning" size="mini" v-else>
                        三级
                    </el-tag>

                </template>
                <template slot-scope="scope" slot="opt">
                    <el-button type="primary" icon="el-icon-edit" size="mini">
                        编辑
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini">
                        删除
                    </el-button>
                </template>

            </tree-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加分类 -->
        <el-dialog
            title="添加分类 "
            :visible.sync="addCateDialog"
            width="50%"
            @close="addCateClose">
            <el-form ref="addCateRef" :model="addCateForm" :rules="addCateFormRules" label-width="100px">
                <el-form-item label="分类名称:" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类:">
                    <el-cascader
                    v-model="selectOption"
                    :options="parentCateList"
                    :props="cascaderProps"
                    @change="parentCateChanged"
                    :clearable="true"
                    >
                </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialog = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data : function(){
        return {
            query:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            cateList:[],
            total:0,
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name'
                },{
                    label:'是否有效',
                    type:'template',
                    template:'isok'
                },{
                    label:'排序',
                     type:'template',
                    template:'order'
                },{
                    label:'操作',
                     type:'template',
                    template:'opt'
                }
            ],
            addCateDialog : false,
            addCateForm:{
                cat_name : '',
                cat_pid:0,
                cat_level:0
            },
            addCateFormRules : {
                cat_name : [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                   
                ]
            },
            parentCateList : [],
            cascaderProps :{ 
                expandTrigger: 'hover',
                value:'cat_id',
                label:'cat_name',
                children:'children',
                checkStrictly:true
             },
             selectOption:[]
            
        }
    },
    methods:{
        async getCateList(){
            const {data:res } = await this.$http.get('categories',{
                params:this.query
            })
            if(res.meta.status !== 200){
                return this.$message.error('获取列表失败')
            }
            this.cateList = res.data.result
            this.total = res.data.total
        },
        //监听pegesize改变
        handleSizeChange(newSize){
            this.query.pagesize = newSize
            this.getCateList()
        },
        handleCurrentChange(newCurrent){
            this.query.pagenum = newCurrent
             this.getCateList()
        },
        showAddDialog(){
            this.getParentCateList()
            this.addCateDialog = true
        },
        async getParentCateList(){
            const {data :res} =await this.$http.get('categories',{params:{
                type:2
            }})
            if(res.meta.status !== 200){
                this.$message.error('获取分类数据失败')
            }
            this.parentCateList = res.data
        },
        parentCateChanged(){
            if(this.selectOption.length > 0){
                this.addCateForm.cat_pid = this.selectOption[this.selectOption.length-1]
                this.addCateForm.cat_level = this.selectOption.length
                return
           }else{
               this.addCateForm.cat_pid = 0
               this.addCateForm.cat_level = 0
           }

            
        },
        addCate(){
            this.$refs.addCateRef.validate(async valid =>{
                if(!valid){
                    return
                }
                const {data:res} = await this.$http.post('categories',this.addCateForm)
                if(res.meta.status !== 201){
                    return this.$message.error('添加失败')
                }
                this.$message.success('添加成功')
                this.getCateList()
                this.addCateDialog = false
            })
            
        },
        //监听对话框的关事件
        addCateClose(){
            this.$refs.addCateRef.resetFields()
            this.addCateForm.cat_pid = 0
            this.addCateForm.cat_level = 0
            this.selectOption=[]

        }

    },
    created(){
        this.getCateList()
    }
}
</script>
<style lang="less" scoped>
    .treeTable {
        margin:15px 0
    }
    .el-cascader{
        width:100%
    }
</style>